<template>
  <div class="Login">
    <el-header>
      <div
        style="
          flex: 1;
          width: 0;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        "
      >
        <el-dropdown placement="bottom">
          <div style="display: flex; align-items: center; cursor: default">
            <img
              src="@/assets/img/Admin.png"
              alt="管理员"
              style="width: 40px; height: 40px; margin: 0 5px"
            />
            <span>请选择角色</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$router.push('/studLogin')"> 学生 </el-dropdown-item>
            <el-dropdown-item @click.native="$router.push('/adminLogin')">
              管理员
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-main>
      <el-form class="login-container" :model="user" :rules="rules">
        <h1 class="title">教师用户登录</h1>
        <el-form-item label="" prop="username">
          <el-input
            type="text"
            v-model="user.username"
            placeholder="登录账号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            type="password"
            v-model="user.password"
            placeholder="登录密码"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="doSubmit()"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "TeachLoginView",
  data () {
    return {
       user:{
        username:'',
        password:''
      },
      rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
          ]
      }

    }
    
  },
  created () {
    
  },
  methods: {
     doSubmit(){
      this.$request.post('/teachers/login', this.user).then((res) => {
        console.log(res);

        if (res.code === 1) {//判断success是否为true
          localStorage.setItem("honey-user", JSON.stringify(res.data));
          this.$router.push('/teacherMain');
          
          // 为true给一个提示框
          this.$message({
            //message: '登陆成功',
            message:'登录成功',
            type:'success'
          });
        } else {
          this.$message({
            //message: ,
            message: '登陆失败',
            type: 'warning'
          });
        }

      }).catch((err) => {
        console.log(err);
      });
    }
  }
};
</script>


<style>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  /* background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
  //background-image: url();
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%; */
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  display: flex;
  align-content: center;
}
</style>